<template>
  <div class="reg">
    <c-back  :tab="tab" :rightFun="handleSubmit"></c-back>
    <div class="form">
      <mt-field label="昵称" placeholder="请输入昵称" type="tel" v-model="phone"></mt-field>
      <mt-field label="账号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
      <mt-field label="设置密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <mt-field label="重复密码" placeholder="请重复输入密码" type="password" v-model="password"></mt-field>
      <mt-field label="验证码" v-model="captcha" placeholder="短信验证码">
        <mt-button type="primary" size="small" @click="getCode">{{smsBtn}}</mt-button>
      </mt-field>
    </div>
  </div>
</template>
<script>
  import CBack from '../../../components/BackFun.vue'

  export default {
    components: {
      CBack
    },
    data () {
      return {
        tab: {
          title: '账号注册',
          rightText: '保存',
        },
        smsBtn: '点击发送',   //按钮文字
        smsCls: '',   //按钮样式
        smsNum: 60,    //倒计时时间
        deNum: 60,     //默认倒计时时间
        auto: false   //开关--在倒计时
      }
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!')
          } else {
            this.$Message.error('表单验证失败!')
          }
        })
      },
      //获取验证码，并修改点击发送为剩余时间
      getCode () {
        if (this.auto === false) {
          this.$emit('sentAjax');    // 发ajax
          this.auto = true;
          this.smsBtn = this.smsNum + "秒后重发";
          let smstimeout = setInterval(() => {
            this.smsNum--;
            this.smsBtn = this.smsNum + "秒后重发";
            if (this.smsNum === 0) {
              clearInterval(smstimeout);
              this.smsBtn = '重新发送';
              this.smsNum = this.deNum;
              this.auto = false;
            }
          }, 1000);
        }
      }
    }
  }
</script>
<style lang="scss">
  @import '../../../assets/style/common';
  .reg{
    padding-top: 70px;
  }
  .form{
    margin-left: 10px;
    margin-right: 10px;
  }
  .mint-field-core{
    font-size: 14px;
  }
</style>

